import * as echarts from 'echarts'

// 散点图
export const dotChart = () => {
  // 模拟数据
  const data = []
  for (let i = 0; i < 8; i++) {
    data.push([i, Math.floor(Math.random() * 10)])
  }
  const option = {
    title: {
      text: '方位占比',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
      left: '42%',
      top: '5%'
    },
    grid: {
      bottom: '15%',
      left: '10%',
      right: '4%',
    },
    tooltip: {
      confine: true,
      textStyle: {
        color: '#00a4ff'
      },
      trigger: 'axis'
    },
    xAxis: {
      data: ['南', '东南', '东', '东北', '北', '西北', '西', '西南'],
      axisTick: {
        show: false // 是否展示刻度线
      },
      axisLine: {
        lineStyle: {
          color: '#fff' // 最下侧X轴颜色
        }
      }
    },
    yAxis: {
      axisLabel: {
        color: '#fff' // 设置纵坐标轴刻度标签的颜色为蓝色
      },
    },
    series: [
      {
        symbolSize: 10,
        data: data,
        type: 'scatter',
        color: '#fff',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10
        },
      }
    ]
  }

  return option
}

// 柱状图
export const barChart = () => {
  // 横轴数据
  const time = new Date()
  const days = []
  for (let i = 0; i < 7; i++) {
    days.unshift(time.getDate() - i)
  }
  let data = []
  for (let i = 0; i < 7; i++) {
    data.push(Math.floor(Math.random() * 10))
  }
  // 纵轴最大值
  let maxNum = 0
  maxNum = Math.max(...data) > maxNum ? Math.max(...data) : maxNum
  let dataShadow = [];
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(maxNum);
  }
  const option = {
    title: {
      text: '近日总数',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
      left: '42%',
      top: '5%'
    },
    grid: {
      bottom: '15%',
      left: '10%',
      right: '4%',
    },
    tooltip: {
      confine: true,
      trigger: 'axis',
      backgroundColor: '#fff', // 悬浮盒子背景颜色
      // 这里可以对内容重写
      formatter: params => {
        let str = ''
        for (const element of params) {
          str += '次数' + ' ' + element.value
        }
        return str
      },
      textStyle: {
        color: '#00a4ff' // 悬浮盒子字体颜色
      }
    },
    xAxis: {
      data: days,
      axisLabel: {
        inside: false,
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [
      {
        type: 'bar',
        showBackground: false,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#fff' },
            { offset: 0.5, color: '#999' },
            { offset: 1, color: '#00a4ff' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00a4ff' },
              { offset: 0.7, color: '#999' },
              { offset: 1, color: '#fff' }
            ])
          }
        },
        data: data
      }
    ]
  };
  return option
}

// 饼状图
export const pieChart = () => {
  // 模拟数据
  const data = [
    { value: 0, name: '周一' },
    { value: 0, name: '周二' },
    { value: 0, name: '周三' },
    { value: 0, name: '周四' },
    { value: 0, name: '周五' },
    { value: 0, name: '周六' },
    { value: 0, name: '周日' }
  ]
  data.forEach(item => {
    item.value = Math.floor(Math.random() * 3000)
  })
  const option = {
    title: {
      text: '星期占比',
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      },
      left: '42%',
      top: '5%'
    },
    tooltip: {
      confine: true,
      textStyle: {
        color: '#00a4ff'
      },
      trigger: 'item'
    },
    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 0.8]
      }
    },
    series: [
      {
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: data.sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: 'radius',
        label: {
          color: '#00a4ff'
        },
        labelLine: {
          lineStyle: {
            color: '#00a4ff'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          color: '#4338dc',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0,1)'
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  }
  return option
}

// 雷达图
export const redarChart = () => {
  // 模拟数据
  const dataNames = [
    { text: '子时' },
    { text: '亥时' },
    { text: '戌时' },
    { text: '酉时' },
    { text: '申时' },
    { text: '未时' },
    { text: '午时' },
    { text: '巳时' },
    { text: '辰时' },
    { text: '卯时' },
    { text: '寅时' },
    { text: '丑时' }
  ]
  const data = []
  for (let i = 0; i < 12; i++) {
    data.push(Math.floor(Math.random() * 10))
  }
  const option = {
    color: ['#fff'],
    title: {
      text: '时辰占比',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
      left: '42%',
      top: '5%'
    },
    legend: {
      bottom: 5,
      left: 65
    },
    tooltip: {
      confine: true,
      show: true, // 显示 tooltip
      trigger: 'item', // 触发方式，默认为 'item'
      textStyle: {
        color: '#00a4ff'
      },
      formatter: function (params) {
        let str = ''
        data.forEach((item, index) => {
          str += dataNames[index].text + ' ' + item + '<br/>'
        })
        return str
      },
    },
    radar: [
      {
        indicator: dataNames,
        center: ['50%', '58%'],
        radius: 60,
        border: 'none',
        startAngle: 90,
        splitNumber: 1,
        shape: 'circle',
        axisName: {
          formatter: '{value}',
          color: '#00a4ff'
        },
        splitArea: {
          areaStyle: {
            color: ['#fff'],
            shadowColor: '#00a4ff',
            shadowBlur: 1
          }
        },
        axisLine: {
          lineStyle: {
            color: '#aaa'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#000'
          }
        }
      }
    ],
    series: [
      {
        type: 'radar',
        emphasis: {
          lineStyle: {
            width: 2
          }
        },
        data: [
          {
            value: data,
            areaStyle: {
              color: '#00a4ff'
            }
          }
        ]
      }
    ]
  }
  return option
}

// 折线图
export const lineChart = () => {
  // 横轴数据
  const time = new Date()
  const days = []
  for (let i = 0; i < 7; i++) {
    days.unshift(time.getDate() - i)
  }

  // 模拟周期数据
  // 基础数据
  const data = {
    '线一': [],
    '线二': [],
    '线三': []
  }
  const dataKeys = Object.keys(data)
  dataKeys.forEach(item => {
    for (let i = 0; i < 7; i++) {
      data[item].push(Math.floor(Math.random() * 9))
    }
  })
  // 纵轴最大值
  let maxNum = 0
  const keys = Object.keys(data)
  keys.forEach(key => {
    maxNum = Math.max(...data[key]) > maxNum ? Math.max(...data[key]) : maxNum
  })
  const option = {
    title: {
      text: '近日明细',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff'
      },
      left: '42%',
      top: '5%'
    },
    grid: {
      top: '25%',
      right: '8%',
      left: '10%',
      bottom: '25%',
    },
    tooltip: {
      confine: true,
      trigger: 'axis',
      backgroundColor: '#fff', // 悬浮盒子背景颜色
      // 这里可以对内容重写
      formatter: params => {
        let str = ''
        let total = 0 // 该时间段内数据总量
        params.forEach(item => {
          total += item.value
        })
        str += '次数' + '<span style="margin-left:5px;">' + total + '</span>' + '<br/>' + '<hr/>'
        for (const element of params) {
          str += element.seriesName + `<span style="position:reactive;right:10px;"> ${element.value}</span>` + '<br/>'
        }
        return str
      },
      textStyle: {
        color: '#00a4ff' // 悬浮盒子字体颜色
      }
    },
    legend: {
      selectedMode: 'multiple', // 开启多选
      textStyle: { color: '#00a4ff' },
      itemGap: 50, // 图例间距
      data: ['线一', '线二', '线三'],
      selected: { '线一': true, '线二': true, '线三': true }, // 默认选中的数据，这里设置为第一条
      bottom: '5%',
      right: '7%',
      lineStyle: { width: 3 } // 图例圆点后的线段粗细，这个属性要求在5.1.0以上版本才可以设置
    },
    toolbox: {
      itemSize: 20,
    },
    xAxis: {
      type: 'category',
      nameLocation: 'middle', // 标题位置居中
      splitLine: {
        show: false
      },
      axisTick: {
        show: false // 是否展示刻度线
        // inside: true // 刻度线朝内还是朝外
      },
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#fff' // 最下侧X轴颜色
        }
      },
      axisLabel: {
        interval: 0,
        color: '#fff',
        fontSize: 12
      },
      data: days
    },
    yAxis: {
      min: 0, // 
      max: maxNum, // 取数据中total最大值的1.4倍为最大刻度,
      // splitNumber: 10, // 刻度间距设置
      offset: 10, // 位置偏移量
      scale: true, // 缩放自适应
      minInterval: 1, // 分割刻度，设置为1时刻度会取整数
      axisLabel: {
        color: '#fff',
        fontFamily: 'SourceHanSansSC-regular',
        fontSize: 12,
        showMinLabel: true, // 显示最小刻度线值
        showMaxLabel: true // 显示最大刻度线值
      },
      axisLine: {
        lineStyle: {
          color: '#eee' // 最左侧Y轴颜色
        }
      },
      splitLine: {
        show: true // 多条线展示
      }
    },
    series: [
      {
        name: '线一',
        type: 'line',
        symbol: 'circle', // 将小圆点改成实心 不写symbol默认空心
        symbolSize: 8, // 小圆点的大小
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {
          color: '#fff', // 折线图与小圆点颜色
          lineStyle: {
            width: 4 // 线条宽度
          }
        },
        data: data['线一']
      },
      {
        name: '线二',
        type: 'line',
        symbol: 'circle', // 将小圆点改成实心 不写symbol默认空心
        symbolSize: 8, // 小圆点的大小
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {
          color: '#00a4ff', // 折线图与小圆点颜色
          lineStyle: {
            width: 3 // 线条宽度
          }
        },
        data: data['线二']
      },
      {
        name: '线三',
        type: 'line',
        symbol: 'circle', // 将小圆点改成实心 不写symbol默认空心
        symbolSize: 8, // 小圆点的大小
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {
          color: '#999', // 折线图与小圆点颜色
          lineStyle: {
            width: 3 // 线条宽度
          }
        },
        data: data['线三']
      }
    ]
  }
  return option
}

// 旭日图
export const sunChart = () => {
  // 模拟数据
  const bgColor = '#4338dc';
  const itemStyle = {
    star5: {
      color: '#fff'
    },
    star4: {
      color: '#fff'
    },
    star3: {
      color: '#fff'
    },
    star2: {
      color: '#fff'
    }
  }
  const data = [
    {
      name: '戊己\n土\n',
      itemStyle: {
        color: '#fff'
      },
      children: [
        {
          name: '西秋',
          children: [
            {
              name: '申金',
              children: [
                {
                  name: '七月'
                }
              ]
            },
            {
              name: '酉金',
              children: [
                {
                  name: '八月'
                }
              ]
            },
            {
              name: '戊土',
              children: [
                {
                  name: '九月'
                }
              ]
            }
          ]
        },
        {
          name: '北冬',
          children: [
            {
              name: '亥水',
              children: [
                {
                  name: '十月'
                }
              ]
            },
            {
              name: '子水',
              children: [
                {
                  name: '陌月'
                }
              ]
            },
            {
              name: '丑土',
              children: [
                {
                  name: '腊月'
                }
              ]
            }
          ]
        },
        {
          name: '东春',
          children: [
            {
              name: '寅木',
              children: [
                {
                  name: '正月'
                }
              ]
            },
            {
              name: '卯木',
              children: [
                {
                  name: '二月'
                }
              ]
            },
            {
              name: '辰土',
              children: [
                {
                  name: '三月'
                }
              ]
            }
          ]
        },
        {
          name: '南夏',
          children: [
            {
              name: '巳火',
              children: [
                {
                  name: '四月'
                }
              ]
            },
            {
              name: '午火',
              children: [
                {
                  name: '五月'
                }
              ]
            },
            {
              name: '未土',
              children: [
                {
                  name: '六月'
                }
              ]
            }
          ]
        },
      ]
    }
  ]
  for (let j = 0; j < data.length; ++j) {
    let level1 = data[j].children;
    for (let i = 0; i < level1.length; ++i) {
      let block = level1[i].children;
      let bookScore = [];
      let bookScoreId;
      for (let star = 0; star < block.length; ++star) {
        let style = (function (name) {
          return itemStyle.star4;
        })(block[star].name);
        block[star].label = {
          color: style.color,
          downplay: {
            opacity: 0.5
          }
        };
        if (block[star].children) {
          style = {
            opacity: 1,
            color: style.color
          };
          block[star].children.forEach(function (book) {
            book.value = 1;
            book.itemStyle = style;
            book.label = {
              color: '#00a4ff'
            };
            let value = 1;
            if (bookScoreId === 0 || bookScoreId === 3) {
              value = 5;
            }
            if (bookScore[bookScoreId]) {
              bookScore[bookScoreId].value += value;
            } else {
              bookScore[bookScoreId] = {
                color: '#fff',
                value: value
              };
            }
          });
        }
      }
      level1[i].itemStyle = {
        color: data[j].itemStyle.color
      };
    }
  }
  const option = {
    title: {
      text: '属性方位分布',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
      left: '42%',
      top: '5%'
    },
    backgroundColor: bgColor,
    color: '#fff',
    series: [
      {
        type: 'sunburst',
        rotate: 45,
        center: ['50%', '55%'],
        data: data,
        sort: function (a, b) {
          if (a.depth === 1) {
            return b.getValue() - a.getValue();
          } else {
            return a.dataIndex - b.dataIndex;
          }
        },
        label: {
          rotate: 'radial',
          color: bgColor
        },
        itemStyle: {
          borderColor: bgColor,
          borderWidth: 2
        },
        levels: [
          {},
          {
            r0: 0,
            r: 18,
            label: {
              rotate: 0
            }
          },
          {
            r0: 18,
            r: 38,
            label: {
              rotate: 0
            },
            itemStyle: {
              shadowBlur: 2,
              shadowColor: '#00a4ff',
              color: 'transparent'
            },
            label: {
              rotate: 'tangential',
              color: '#00a4ff'
            }
          },
          {
            r0: 38,
            r: 60,
            itemStyle: {
              shadowBlur: 2,
              shadowColor: '#fff',
              color: 'transparent'
            },
            label: {
              rotate: 'tangential',
              color: '#fff'
            }
          },
          {
            r0: 60,
            r: 80,
            itemStyle: {
              shadowBlur: 80,
              shadowColor: '#fff'
            },
            label: {
              rotate: 10,
              fontSize: 10,
              textShadowBlur: 5,
              textShadowColor: '#fff'
            }
          }
        ]
      }
    ]
  }
  return option
}

// 八宫图
export const punchChart = () => {
  // 模拟数据
  const hours = [
    '离', '坤', '兑', '乾', '坎', '艮', '震', '巽'
  ];

  const data = []
  for (let i = 0; i < 20; i++) {
    const arr = [Math.floor(Math.random() * 6), Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)]
    data.push(arr)
  }
  const option = {
    title: {
      text: '方位分布',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
      left: '42%',
      top: '5%'
    },
    grid: {
      bottom: '15%',
      left: '10%',
      right: '4%',
    },
    polar: {
      center: ['50%', '55%'],
      radius: '60%'
    },
    tooltip: {
      confine: true,
      textStyle: {
        color: '#00a4ff'
      },
      formatter: function (params) {
        return '次数' + ' ' + params.value[2]
      }
    },
    angleAxis: {
      type: 'category',
      data: hours,
      axisLabel: {
        color: '#00a4ff'
      },
      boundaryGap: false,
      splitLine: {
        show: true,
        color: '#fff'
      },
      axisLine: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
      show: false
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'polar',
        itemStyle: {
          color: '#00a4ff'
        },
        symbolSize: function (val) {
          return val[2] * 2
        },
        data: data,
        animationDelay: function (idx) {
          return idx * 50;
        }
      }
    ]
  }
  return option
}

// 日历图
export const dateChart = () => {
  // 模拟数据
  const dateList = [
    ['2017-1-1', '初四'],
    ['2017-1-2', '初五'],
    ['2017-1-3', '初六'],
    ['2017-1-4', '初七'],
    ['2017-1-5', '初八', '小寒'],
    ['2017-1-6', '初九'],
    ['2017-1-7', '初十'],
    ['2017-1-8', '十一'],
    ['2017-1-9', '十二'],
    ['2017-1-10', '十三'],
    ['2017-1-11', '十四'],
    ['2017-1-12', '十五'],
    ['2017-1-13', '十六'],
    ['2017-1-14', '十七'],
    ['2017-1-15', '十八'],
    ['2017-1-16', '十九'],
    ['2017-1-17', '二十'],
    ['2017-1-18', '廿一'],
    ['2017-1-19', '廿二'],
    ['2017-1-20', '廿三', '大寒'],
    ['2017-1-21', '廿四'],
    ['2017-1-22', '廿五'],
    ['2017-1-23', '廿六'],
    ['2017-1-24', '廿七'],
    ['2017-1-25', '廿八'],
    ['2017-1-26', '廿九'],
    ['2017-1-27', '三十'],
    ['2017-1-28', '正月'],
    ['2017-1-29', '初二'],
    ['2017-1-30', '初三'],
    ['2017-1-31', '初四'],
    ['2017-2-1', '初五'],
    ['2017-2-2', '初六'],
    ['2017-2-3', '初七', '立春'],
    ['2017-2-4', '初八'],
    ['2017-2-5', '初九'],
    ['2017-2-6', '初十'],
    ['2017-2-7', '十一'],
    ['2017-2-8', '十二'],
    ['2017-2-9', '十三'],
    ['2017-2-10', '十四'],
    ['2017-2-11', '十五'],
    ['2017-2-12', '十六'],
    ['2017-2-13', '十七'],
    ['2017-2-14', '十八'],
    ['2017-2-15', '十九'],
    ['2017-2-16', '二十'],
    ['2017-2-17', '廿一'],
    ['2017-2-18', '廿二', '雨水'],
    ['2017-2-19', '廿三'],
    ['2017-2-20', '廿四'],
    ['2017-2-21', '廿五'],
    ['2017-2-22', '廿六'],
    ['2017-2-23', '廿七'],
    ['2017-2-24', '廿八'],
    ['2017-2-25', '廿九'],
    ['2017-2-26', '二月'],
    ['2017-2-27', '初二'],
    ['2017-2-28', '初三'],
    ['2017-3-1', '初四'],
    ['2017-3-2', '初五'],
    ['2017-3-3', '初六'],
    ['2017-3-4', '初七'],
    ['2017-3-5', '初八', '驚蟄'],
    ['2017-3-6', '初九'],
    ['2017-3-7', '初十'],
    ['2017-3-8', '十一'],
    ['2017-3-9', '十二'],
    ['2017-3-10', '十三'],
    ['2017-3-11', '十四'],
    ['2017-3-12', '十五'],
    ['2017-3-13', '十六'],
    ['2017-3-14', '十七'],
    ['2017-3-15', '十八'],
    ['2017-3-16', '十九'],
    ['2017-3-17', '二十'],
    ['2017-3-18', '廿一'],
    ['2017-3-19', '廿二'],
    ['2017-3-20', '廿三', '春分'],
    ['2017-3-21', '廿四'],
    ['2017-3-22', '廿五'],
    ['2017-3-23', '廿六'],
    ['2017-3-24', '廿七'],
    ['2017-3-25', '廿八'],
    ['2017-3-26', '廿九'],
    ['2017-3-27', '三十'],
    ['2017-3-28', '三月'],
    ['2017-3-29', '初二'],
    ['2017-3-30', '初三'],
    ['2017-3-31', '初四'],
    ['2017-4-1', '初五'],
    ['2017-4-2', '初六'],
    ['2017-4-3', '初七'],
    ['2017-4-4', '初八', '清明'],
    ['2017-4-5', '初九'],
    ['2017-4-6', '初十'],
    ['2017-4-7', '十一'],
    ['2017-4-8', '十二'],
    ['2017-4-9', '十三'],
    ['2017-4-10', '十四'],
    ['2017-4-11', '十五'],
    ['2017-4-12', '十六'],
    ['2017-4-13', '十七'],
    ['2017-4-14', '十八'],
    ['2017-4-15', '十九'],
    ['2017-4-16', '二十'],
    ['2017-4-17', '廿一'],
    ['2017-4-18', '廿二'],
    ['2017-4-19', '廿三'],
    ['2017-4-20', '廿四', '穀雨'],
    ['2017-4-21', '廿五'],
    ['2017-4-22', '廿六'],
    ['2017-4-23', '廿七'],
    ['2017-4-24', '廿八'],
    ['2017-4-25', '廿九'],
    ['2017-4-26', '四月'],
    ['2017-4-27', '初二'],
    ['2017-4-28', '初三'],
    ['2017-4-29', '初四'],
    ['2017-4-30', '初五'],
    ['2017-5-1', '初六'],
    ['2017-5-2', '初七'],
    ['2017-5-3', '初八'],
    ['2017-5-4', '初九'],
    ['2017-5-5', '初十', '立夏'],
    ['2017-5-6', '十一'],
    ['2017-5-7', '十二'],
    ['2017-5-8', '十三'],
    ['2017-5-9', '十四'],
    ['2017-5-10', '十五'],
    ['2017-5-11', '十六'],
    ['2017-5-12', '十七'],
    ['2017-5-13', '十八'],
    ['2017-5-14', '十九'],
    ['2017-5-15', '二十'],
    ['2017-5-16', '廿一'],
    ['2017-5-17', '廿二'],
    ['2017-5-18', '廿三'],
    ['2017-5-19', '廿四'],
    ['2017-5-20', '廿五'],
    ['2017-5-21', '廿六', '小滿'],
    ['2017-5-22', '廿七'],
    ['2017-5-23', '廿八'],
    ['2017-5-24', '廿九'],
    ['2017-5-25', '三十'],
    ['2017-5-26', '五月'],
    ['2017-5-27', '初二'],
    ['2017-5-28', '初三'],
    ['2017-5-29', '初四'],
    ['2017-5-30', '初五'],
    ['2017-5-31', '初六'],
    ['2017-6-1', '初七'],
    ['2017-6-2', '初八'],
    ['2017-6-3', '初九'],
    ['2017-6-4', '初十'],
    ['2017-6-5', '十一', '芒種'],
    ['2017-6-6', '十二'],
    ['2017-6-7', '十三'],
    ['2017-6-8', '十四'],
    ['2017-6-9', '十五'],
    ['2017-6-10', '十六'],
    ['2017-6-11', '十七'],
    ['2017-6-12', '十八'],
    ['2017-6-13', '十九'],
    ['2017-6-14', '二十'],
    ['2017-6-15', '廿一'],
    ['2017-6-16', '廿二'],
    ['2017-6-17', '廿三'],
    ['2017-6-18', '廿四'],
    ['2017-6-19', '廿五'],
    ['2017-6-20', '廿六'],
    ['2017-6-21', '廿七', '夏至'],
    ['2017-6-22', '廿八'],
    ['2017-6-23', '廿九'],
    ['2017-6-24', '六月'],
    ['2017-6-25', '初二'],
    ['2017-6-26', '初三'],
    ['2017-6-27', '初四'],
    ['2017-6-28', '初五'],
    ['2017-6-29', '初六'],
    ['2017-6-30', '初七'],
    ['2017-7-1', '初八'],
    ['2017-7-2', '初九'],
    ['2017-7-3', '初十'],
    ['2017-7-4', '十一'],
    ['2017-7-5', '十二'],
    ['2017-7-6', '十三'],
    ['2017-7-7', '十四', '小暑'],
    ['2017-7-8', '十五'],
    ['2017-7-9', '十六'],
    ['2017-7-10', '十七'],
    ['2017-7-11', '十八'],
    ['2017-7-12', '十九'],
    ['2017-7-13', '二十'],
    ['2017-7-14', '廿一'],
    ['2017-7-15', '廿二'],
    ['2017-7-16', '廿三'],
    ['2017-7-17', '廿四'],
    ['2017-7-18', '廿五'],
    ['2017-7-19', '廿六'],
    ['2017-7-20', '廿七'],
    ['2017-7-21', '廿八'],
    ['2017-7-22', '廿九', '大暑'],
    ['2017-7-23', '閏六'],
    ['2017-7-24', '初二'],
    ['2017-7-25', '初三'],
    ['2017-7-26', '初四'],
    ['2017-7-27', '初五'],
    ['2017-7-28', '初六'],
    ['2017-7-29', '初七'],
    ['2017-7-30', '初八'],
    ['2017-7-31', '初九'],
    ['2017-8-1', '初十'],
    ['2017-8-2', '十一'],
    ['2017-8-3', '十二'],
    ['2017-8-4', '十三'],
    ['2017-8-5', '十四'],
    ['2017-8-6', '十五'],
    ['2017-8-7', '十六', '立秋'],
    ['2017-8-8', '十七'],
    ['2017-8-9', '十八'],
    ['2017-8-10', '十九'],
    ['2017-8-11', '二十'],
    ['2017-8-12', '廿一'],
    ['2017-8-13', '廿二'],
    ['2017-8-14', '廿三'],
    ['2017-8-15', '廿四'],
    ['2017-8-16', '廿五'],
    ['2017-8-17', '廿六'],
    ['2017-8-18', '廿七'],
    ['2017-8-19', '廿八'],
    ['2017-8-20', '廿九'],
    ['2017-8-21', '三十'],
    ['2017-8-22', '七月'],
    ['2017-8-23', '初二', '處暑'],
    ['2017-8-24', '初三'],
    ['2017-8-25', '初四'],
    ['2017-8-26', '初五'],
    ['2017-8-27', '初六'],
    ['2017-8-28', '初七'],
    ['2017-8-29', '初八'],
    ['2017-8-30', '初九'],
    ['2017-8-31', '初十'],
    ['2017-9-1', '十一'],
    ['2017-9-2', '十二'],
    ['2017-9-3', '十三'],
    ['2017-9-4', '十四'],
    ['2017-9-5', '十五'],
    ['2017-9-6', '十六'],
    ['2017-9-7', '十七', '白露'],
    ['2017-9-8', '十八'],
    ['2017-9-9', '十九'],
    ['2017-9-10', '二十'],
    ['2017-9-11', '廿一'],
    ['2017-9-12', '廿二'],
    ['2017-9-13', '廿三'],
    ['2017-9-14', '廿四'],
    ['2017-9-15', '廿五'],
    ['2017-9-16', '廿六'],
    ['2017-9-17', '廿七'],
    ['2017-9-18', '廿八'],
    ['2017-9-19', '廿九'],
    ['2017-9-20', '八月'],
    ['2017-9-21', '初二'],
    ['2017-9-22', '初三'],
    ['2017-9-23', '初四', '秋分'],
    ['2017-9-24', '初五'],
    ['2017-9-25', '初六'],
    ['2017-9-26', '初七'],
    ['2017-9-27', '初八'],
    ['2017-9-28', '初九'],
    ['2017-9-29', '初十'],
    ['2017-9-30', '十一'],
    ['2017-10-1', '十二'],
    ['2017-10-2', '十三'],
    ['2017-10-3', '十四'],
    ['2017-10-4', '十五'],
    ['2017-10-5', '十六'],
    ['2017-10-6', '十七'],
    ['2017-10-7', '十八'],
    ['2017-10-8', '十九', '寒露'],
    ['2017-10-9', '二十'],
    ['2017-10-10', '廿一'],
    ['2017-10-11', '廿二'],
    ['2017-10-12', '廿三'],
    ['2017-10-13', '廿四'],
    ['2017-10-14', '廿五'],
    ['2017-10-15', '廿六'],
    ['2017-10-16', '廿七'],
    ['2017-10-17', '廿八'],
    ['2017-10-18', '廿九'],
    ['2017-10-19', '三十'],
    ['2017-10-20', '九月'],
    ['2017-10-21', '初二'],
    ['2017-10-22', '初三'],
    ['2017-10-23', '初四', '霜降'],
    ['2017-10-24', '初五'],
    ['2017-10-25', '初六'],
    ['2017-10-26', '初七'],
    ['2017-10-27', '初八'],
    ['2017-10-28', '初九'],
    ['2017-10-29', '初十'],
    ['2017-10-30', '十一'],
    ['2017-10-31', '十二'],
    ['2017-11-1', '十三'],
    ['2017-11-2', '十四'],
    ['2017-11-3', '十五'],
    ['2017-11-4', '十六'],
    ['2017-11-5', '十七'],
    ['2017-11-6', '十八'],
    ['2017-11-7', '十九', '立冬'],
    ['2017-11-8', '二十'],
    ['2017-11-9', '廿一'],
    ['2017-11-10', '廿二'],
    ['2017-11-11', '廿三'],
    ['2017-11-12', '廿四'],
    ['2017-11-13', '廿五'],
    ['2017-11-14', '廿六'],
    ['2017-11-15', '廿七'],
    ['2017-11-16', '廿八'],
    ['2017-11-17', '廿九'],
    ['2017-11-18', '十月'],
    ['2017-11-19', '初二'],
    ['2017-11-20', '初三'],
    ['2017-11-21', '初四'],
    ['2017-11-22', '初五', '小雪'],
    ['2017-11-23', '初六'],
    ['2017-11-24', '初七'],
    ['2017-11-25', '初八'],
    ['2017-11-26', '初九'],
    ['2017-11-27', '初十'],
    ['2017-11-28', '十一'],
    ['2017-11-29', '十二'],
    ['2017-11-30', '十三'],
    ['2017-12-1', '十四'],
    ['2017-12-2', '十五'],
    ['2017-12-3', '十六'],
    ['2017-12-4', '十七'],
    ['2017-12-5', '十八'],
    ['2017-12-6', '十九'],
    ['2017-12-7', '二十', '大雪'],
    ['2017-12-8', '廿一'],
    ['2017-12-9', '廿二'],
    ['2017-12-10', '廿三'],
    ['2017-12-11', '廿四'],
    ['2017-12-12', '廿五'],
    ['2017-12-13', '廿六'],
    ['2017-12-14', '廿七'],
    ['2017-12-15', '廿八'],
    ['2017-12-16', '廿九'],
    ['2017-12-17', '三十'],
    ['2017-12-18', '十一月'],
    ['2017-12-19', '初二'],
    ['2017-12-20', '初三'],
    ['2017-12-21', '初四'],
    ['2017-12-22', '初五', '冬至'],
    ['2017-12-23', '初六'],
    ['2017-12-24', '初七'],
    ['2017-12-25', '初八'],
    ['2017-12-26', '初九'],
    ['2017-12-27', '初十'],
    ['2017-12-28', '十一'],
    ['2017-12-29', '十二'],
    ['2017-12-30', '十三'],
    ['2017-12-31', '十四']
  ]

  const heatmapData = [];
  const lunarData = [];
  for (let i = 0; i < dateList.length; i++) {
    heatmapData.push([dateList[i][0], Math.floor(Math.random() * 10)]);
    lunarData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);
  }
  const option = {
    title: {
      text: '日期占比',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
      left: '42%',
      top: '5%'
    },
    tooltip: {
      confine: true,
      textStyle: {
        color: '#00a4ff'
      },
      formatter: function (params) {
        return '次数: ' + params.value[1].toFixed(0)
      }
    },
    visualMap: {
      show: false,
      min: 0,
      max: 30,
      calculable: true,
      seriesIndex: [2],
      orient: 'horizontal',
      inRange: {
        color: "#fff",
        opacity: [0, 1]
      }
    },
    calendar: [
      {
        left: 'center',
        top: '20%',
        cellSize: [45, 34],
        yearLabel: { show: false },
        orient: 'vertical',
        itemStyle: {
          borderWidth: 0.7, // 设置日期格子的边框宽度
          borderColor: '#fff', // 设置日期格子的边框颜色
          color: '#00a4ff' // 设置日期格子的背景颜色
        },
        dayLabel: {
          show: false
        },
        monthLabel: {
          show: false
        },
        range: '2017-03'
      }
    ],
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 0,
        label: {
          show: true,
          formatter: function (params) {
            var d = echarts.number.parseDate(params.value[0]);
            return d.getDate();
          },
          color: '#fff'
        },
        data: lunarData,
        silent: true
      },
      {
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 0,
        label: {
          show: true,
          formatter: function (params) {
            return '\n\n\n' + (params.value[3] || '');
          },
          fontSize: 8,
          fontWeight: 400,
          color: '#fff'
        },
        data: lunarData,
        silent: true
      },
      {
        name: '次数',
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: heatmapData
      }
    ]
  }
  return option
}